<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<text class="nav-title">排队查询</text>
		</view>

		<!-- 排队号输入界面 -->
		<view class="input-number" v-if="!hasEnteredNumber">
			<view class="shop-info">
				<image src="../../static/qushuilog.png" alt="餐厅logo" class="shop-logo"></image>
				<view class="shop-details">
					<text class="shop-name">{{ shopName }}</text>
					<text class="shop-desc">人气餐厅 · 美味佳肴</text>
				</view>
			</view>

			<view class="queue-number-input">
				<text class="input-title">请输入排队号(非排队号查询无需选择类型)：</text>

				<view class="type-selector">
					<text class="type-label">类型：</text>
					<view class="type-options">
						<button class="type-btn" :class="{ 'type-btn-active': selectedType === type }"
							v-for="type in ['A', 'B', 'C']" :key="type" @click="selectType(type)">
							{{ type }}
						</button>
					</view>
				</view>

				<view class="number-input">
					<text class="number-label">号码：</text>
					<input type="number" placeholder="请输入排队号/手牌号/手机号" v-model="numberValue" class="number-input-field" />
				</view>

				<button class="confirm-btn" @click="confirmNumber" >
					确认查询
				</button>
			</view>
		</view>

		<!-- 排队状态界面 -->
		<view class="queue-status" v-if="hasEnteredNumber">
			<view class="status-header">
				<text class="status-text">{{ statusText }}</text>
				<image :src="userImage" alt="排队中图标" class="status-icon" v-if="queueStatus === 0 || queueStatus === 1">
				</image>
			</view>

			<view class="queue-details">
				<view class="queue-item">
					<text class="queue-label">您的号码</text>
					<text class="queue-value">{{ queueNumber }}</text>
				</view>
				<!-- 当queueStatus不是5时才显示前方等待行 -->
				<view class="queue-item" v-if="queueStatus !== 5">
					<text class="queue-label">前方等待</text>
					<text class="queue-value">{{ peopleAhead }}桌</text>
				</view>
				<view class="queue-item">
					<text class="queue-label">取号时间</text>
					<text class="queue-value">{{ formatTime(queueTime) }}</text>
				</view>
			</view>

			<view class="shop-name-large">{{ shopName }}</view>

			<view class="action-buttons">
				<button class="action-btn reset-btn" @click="resetNumber">
					重新输入排队号
				</button>
				<button class="action-btn refresh-btn" @click="refreshStatus"
					:disabled="queueStatus !== 0 && queueStatus !== 1 && queueStatus !==5">
					<i class="fa fa-refresh"></i> 刷新状态
				</button>
			</view>

			<view class="queue-tips" v-if="queueStatus === 0 || queueStatus === 1">
				<text>温馨提示：请留意叫号，过号需重新排队</text>
			</view>

			<view class="queue-result" v-if="queueStatus === 3">
				<text class="result-text">您的号码已超时</text>
			</view>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<text class="footer-text">如有疑问，请联系店员</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 店铺信息
				shopName: "",
				shopId: "",
				isShopInfoValid: true,

				// 排队号输入相关
				hasEnteredNumber: false,
				selectedType: null,
				numberValue: "",

				// 排队状态相关
				queueId: null,
				queueNumber: null,
				queueStatus: 0, // 0排队中1叫号中2已取消3已超时5留号中
				peopleAhead: 0,
				queueTime: null,
				userImage: "",

				refreshInterval: null
			};
		},
		computed: {
			canConfirm() {
				return this.selectedType && this.numberValue;
			},
			statusText() {
				let text;
				switch (this.queueStatus) {
					case 0:
						text = "正在排队中";
						break;
					case 1:
						text = "正在叫号中";
						break;
					case 2:
						text = "已取消排队";
						break;
					case 3:
						text = "号码已超时";
						break;
					case 5:
						text = "留号中";
						break;
					default:
						text = "排队中";
				}
				return text;
			}
		},
		onLoad() {
			// 从URL参数获取店铺信息
			this.getShopInfoFromUrl();
		},
		onUnload() {
			if (this.refreshInterval) {
				clearInterval(this.refreshInterval);
			}
		},
		methods: {
			// 从URL参数获取店铺信息
			getShopInfoFromUrl() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const options = currentPage.options;

				// 从URL参数中获取shopId和shopName
				this.shopId = options.shopId || "";
				this.shopName = options.shopName || "";

				// 验证店铺信息是否有效
				if (!this.shopId || !this.shopName) {
					this.isShopInfoValid = false;
					uni.showToast({
						title: '请重新扫码进入',
						icon: 'none',
						duration: 3000
					});
				} else {
					this.isShopInfoValid = true;
				}
			},

			selectType(type) {
				this.selectedType = this.selectedType === type ? null : type;
			},

			formatTime(timeStr) {
				if (!timeStr) {
					return "";
				}

				const date = new Date(timeStr);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},

			confirmNumber() {
				uni.showLoading({
					title: '正在查询...'
				});

				// 修改：处理没有选择类型的情况
				this.queueNumber = this.selectedType ? `${this.selectedType}${this.numberValue}` : this.numberValue;
				this.hasEnteredNumber = true;
				this.refreshStatus();
				this.startAutoRefresh();
			},

			resetNumber() {
				this.hasEnteredNumber = false;
				this.selectedType = null;
				this.numberValue = "";
				this.queueId = null;
				this.queueNumber = null;
				this.queueStatus = 0;
				this.peopleAhead = 0;
				this.queueTime = null;

				if (this.refreshInterval) {
					clearInterval(this.refreshInterval);
					this.refreshInterval = null;
				}
			},

			refreshStatus() {
				uni.showLoading({
					title: '正在刷新...',
					mask: false
				});

				uni.request({
					url: `http://ziyan.xshhotels.cn:8981/api/Queue/PagingQueueByConsumer`,
					method: 'POST',
					data: {
						shopId: this.shopId,
						type: this.selectedType,
						code: this.numberValue
					},
					success: (res) => {
						uni.hideLoading();

						if (res.data && res.data.success) {
							const data = res.data.data;

							this.queueNumber = data.code;
							this.queueStatus = data.status;
							this.peopleAhead = data.num || 0;
							this.queueTime = data.time;
							this.queueId = data.id;

							uni.vibrateShort();
							uni.showToast({
								title: '已刷新',
								icon: 'none',
								duration: 1000
							});

							if (this.queueStatus !== 0 && this.queueStatus !== 1 && this.queueStatus !== 5) {
								if (this.refreshInterval) {
									clearInterval(this.refreshInterval);
									this.refreshInterval = null;
								}
							}

							if (this.queueStatus === 1) {
								uni.showToast({
									title: '正在叫您的号，请前往就餐',
									icon: 'none',
									duration: 3000
								});
							}
						} else {
							uni.showToast({
								title: res.data?.msg || '查询失败',
								icon: 'none',
								duration: 2000
							});
							this.hasEnteredNumber = false;
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			startAutoRefresh() {
				if (this.refreshInterval) {
					clearInterval(this.refreshInterval);
				}

				// 每30秒自动刷新一次
				this.refreshInterval = setInterval(() => {
					this.refreshStatus();
				}, 30000);
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #f5f9f6;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.navbar {
		background-color: #069c29;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.nav-title {
		color: white;
		font-size: 18px;
		font-weight: bold;
	}

	/* 排队号输入界面 */
	.input-number {
		padding: 20px 15px;
	}

	.shop-info {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(6, 156, 41, 0.1);
	}

	.shop-logo {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		margin-right: 15px;
	}

	.shop-name {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 5px;
	}

	.shop-desc {
		font-size: 14px;
		color: #666;
	}

	.queue-number-input {
		background-color: white;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(6, 156, 41, 0.1);
	}

	.input-title {
		font-size: 16px;
		color: #333;
		display: block;
		margin-bottom: 15px;
	}

	.type-selector {
		margin-bottom: 15px;
	}

	.type-label {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}

	.type-options {
		display: inline-flex;
		gap: 10px;
	}

	.type-btn {
		width: 40px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border: 1px solid #069c29;
		color: #069c29;
		border-radius: 4px;
		font-size: 16px;
		background-color: white;
	}

	.type-btn-active {
		background-color: #069c29;
		color: white;
	}

	.number-input {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
	}

	.number-label {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
		width: 45px;
	}

	.number-input-field {
		flex: 1;
		height: 44px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 0 15px;
		font-size: 16px;
	}

	.confirm-btn {
		width: 100%;
		height: 48px;
		background-color: #069c29;
		color: white;
		border: none;
		border-radius: 24px;
		font-size: 18px;
		font-weight: bold;
	}

	.confirm-btn:disabled {
		background-color: #a5d9b3;
		opacity: 0.7;
	}

	/* 排队状态界面 */
	.queue-status {
		padding: 20px 15px;
	}

	.status-header {
		text-align: center;
		margin-bottom: 20px;
	}

	.status-text {
		color: #069c29;
		font-size: 20px;
		font-weight: bold;
		margin-right: 10px;
	}

	.status-icon {
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.queue-details {
		background-color: white;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(6, 156, 41, 0.1);
	}

	.queue-item {
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.queue-item:last-child {
		border-bottom: none;
	}

	.queue-label {
		color: #666;
		font-size: 16px;
	}

	.queue-value {
		color: #333;
		font-size: 16px;
		font-weight: bold;
	}

	.shop-name-large {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
	}

	.action-buttons {
		display: flex;
		gap: 15px;
		margin-bottom: 20px;
	}

	.action-btn {
		flex: 1;
		height: 44px;
		border-radius: 22px;
		font-size: 16px;
	}

	.reset-btn {
		color: #069c29;
		border: 1px solid #069c29;
		background-color: white;
	}

	.refresh-btn {
		background-color: #069c29;
		color: white;
		border: none;
	}

	.reset-btn:disabled,
	.refresh-btn:disabled {
		opacity: 0.5;
	}

	.queue-tips {
		background-color: #f0f9f2;
		color: #069c29;
		padding: 12px 15px;
		border-radius: 8px;
		font-size: 14px;
		text-align: center;
		margin-bottom: 20px;
	}

	.queue-result {
		text-align: center;
		padding: 20px 0;
	}

	.result-text {
		color: #f53f3f;
		font-size: 18px;
		font-weight: bold;
	}

	/* 底部信息 */
	.footer {
		text-align: center;
		padding: 15px;
		color: #999;
		font-size: 14px;
	}
</style>